<template>
    <div class="wrapper">
      <el-form
        ref="loginForm"
        v-loading="loading"
        element-loading-text="正在登录..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :rules="rules"
        :model="loginForm"
        class="registerContainer"
        label-width="70px">
        <h3 class="loginTitle">个 人 登 录</h3>
        <el-form-item label="用户名" prop="username">
          <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密 码" prop="password">
          <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-row>
            <el-col :span="14">
              <el-input type="text" auto-complete="false"
                        v-model="loginForm.code"
                        placeholder="请输入验证码"
                        style="width: 160px;"></el-input>
            </el-col>
            <el-col :span="10">
              <img :src="'api/'+captchaUrl" @click="updateCaptcha"/>
            </el-col>
          </el-row>
        </el-form-item>

        <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
        <el-row class="login_register">
          <el-col :span="12">
            <el-button type="primary" style="width:80%" @click="submitLogin">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="success" style="width:80%" @click="register">注册</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data(){
            return{
                loginForm:{
                    username: '',
                    password: '',
                    code: ''
                },
                checked: true,
                captchaUrl: '/captcha?time='+new Date(),
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                },
                loading: false
            }
        },
        methods:{
            submitLogin(){
                this.$refs.loginForm.validate(valid=>{
                    if(valid){
                        this.loading=true;
                        this.postRequest("/loginValidate",this.loginForm).then(resp=>{
                            if(resp){
                                if(resp.success){
                                    const token=resp.token;
                                    sessionStorage.setItem('token',token);
                                    const currentUser = JSON.stringify(resp.entity);
                                    sessionStorage.setItem('currentUser',currentUser);
                                    this.loading=false;
                                    let preRoute=sessionStorage.getItem('preRoute');
                                    if(preRoute){
                                        this.$router.replace(preRoute);
                                    }else{
                                        this.$router.replace('/home');
                                    }
                                }else{
                                    this.$message.error(resp.message);
                                    this.loading=false;
                                    this.updateCaptcha();
                                    return false;
                                }
                            }else{
                                this.loading=false;
                                this.$message.error("未知错误!");
                                this.updateCaptcha();
                                return false;
                            }
                        })
                    }else{
                        this.$message.error("请输入所有字段！");
                        this.updateCaptcha();
                        return false;
                    }
                })
            },
            updateCaptcha(){
                this.captchaUrl='/captcha?time='+new Date();
                this.loginForm.code = '';
            },
            register(){
                let { href } = this.$router.resolve({ path: '/register' });
                window.open(href, 'register');

            }
        }
    }
</script>

<style scoped>
  .wrapper{
    width: 100%;
    height: 100%;
  }
  .registerContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .loginTitle{
    margin: 0 auto 40px auto;
    text-align: center;
  }
  .loginRemember{
    text-align: left;
    margin: 0 0 15px 17px;
  }
  .el-form-item__content{
    display: flex;
    align-items: center;
  }
  .login_register{
    text-align: center;
  }
</style>
